<template>
	<div class="container">
		<!-- 头部标题栏 -->
		<h3 class="header-title clearfix">
			<span></span>
			<p>{{$store.getters.getPageTitle}}</p>
			<p class="fr el-icon-plus" @click="function(){return openInputDialog('新增')}" v-if="title.add"> 新增</p>
			<p class="fr el-icon-arrow-left" @click="goBack" v-else> 返回</p>
		</h3>
		<!-- 主体部分-管理员列表页面 -->
		<div class="main-top" v-if="title.add">
			<!-- 搜索栏 -->
			<comSearch :options="search" @searchList="searchData"></comSearch>
			<!-- 数据列表 -->
			<comTable :options="tableList" @detailsView="detailsView" @esiteUser="esiteUser" @restPassword="restPassword"
				@openInputDialog="function(data){return openInputDialog('移交',data)}"
			></comTable>
		</div>
		<!-- 主体部分-单个业务员详情 -->
		<div class="main-bot" v-else>
			<!-- 搜索栏 -->
			<comSearch ref="search" :options="salesmanSearch" @searchList="searchData"></comSearch>
			<!-- 数据列表 -->
			<comTable :options="administrators" 
				@openDetailsDialog="function(data){return openDetailsDialog('明细',data)}"
				@openRemarksDialog="function(data){return openDetailsDialog('备注',data)}"
				@addRemarks="addRemarks" @openResume="openResume" 
			></comTable>
		</div>
		<!-- input弹窗 -->
		<comInput :options="inputData" @subData="subData"></comInput>
		<!-- 修改明细弹窗 -->
		<comDetails :options="detailsData" @getDetailsList="getDetailsList"></comDetails>
		<!-- 新增备注弹窗 -->
		<perMgAddRemarks ref="remark" :options="remarksData" @subRemarks="subRemarks"></perMgAddRemarks>
		<!-- 简历模板弹窗 -->
		<comResume :options="remuseData" ></comResume>
		
		<!-- 分页器 -->
		<div class="pageBox">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="pageChange"
				:current-page="cur"
				:page-sizes="[10, 20, 30, 50, 100]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalNum"
				background
			></el-pagination>
		</div>
	</div>
</template>

<script>
export default{
	components:{
		comSearch: () => import("../commonComponents/comSearch.vue"),
		comTable: () => import("../commonComponents/comTable.vue"),
		comInput: () => import("../commonComponents/comInput.vue"),
		comDetails: () => import("../commonComponents/comDetails.vue"),
		comResume: () => import("../commonComponents/comResume.vue"),
		perMgAddRemarks: () => import("../pageComponents/perMgAddRemarks.vue"),
		
	},
	data(){
		return {
			title: {
				add: true,												//新增按钮
			},
			//公共信息
			commonMsg:{
				searchData:{},												//当前的搜索条件
				userInfo: {},												//当前搜索人信息
			},
			/* 搜索列表 */
			search: {
				userShow: true,												//姓名
				telShow: true,	
				entryDateShow:true,
				operationTime:true,											//电话号码
			},
			/* 招聘人员管理列表数据 */
			tableList:{	
				list:[
					{title: '姓名',prop: 'name',isClick: false},
					{title: '账号',prop: 'accountNumber',isClick: false},
					{title: '手机号',prop: 'telnum',isClick: false},
					{title: '数据量',prop: 'dataSize',isClick: false},
					{title: '上次操作时间',prop: 'updateTime',isClick: false},
					{title: '起始时间',prop: 'createTime',isClick: false}
				],
				noOperation:true,	//是否有操作项
				operation:[			//操作项内容
					// {name:'查看明细',isBtn:false,title:'detailsView'},
					{name:'编辑',isBtn:false,title:'esiteUser'},
					{name:'重置密码',isBtn:false,title:'restPassword'}
				],
				data:[
					/* {
						name: '老王',								//姓名
						accountNumber:'admin',						//账号
						telnum: '13434343434',						//手机号
						dataSize: '50',								//数据量
						operatorTime: '2020-20-11',					//上次操作时间
						createTime: '2020-1-15',					//起始时间
					} */
				]
			},
			
			/* 项目详情搜索条件 */
			salesmanSearch:{
				userShow: true,												//姓名
				telShow: true,												//电话号码
				tagShow: true,												//标注
				sexShow: true,												//性别
				ageShow: true,												//年龄
				educationShow: true,										//学历
				addressShow: true,											//现住址
				workStatusShow: true,										//工作状态
				postShow: true,												//岗位
				projectShow: true,											//项目归属
				entryShow: true,											//录入时间
				startAndEndTIme:true,
				 
				
			},
			/* 项目详情数据列表 */
			administrators:{
				list:[
					{title: '标注',prop: 'arrange',isClick: false},
					{title: '姓名',prop: 'name',isClick: false},
					{title: '手机号',prop: 'telnum',isClick: false},
					{title: '性别',prop: 'sex',isClick: false},
					{title: '年龄',prop: 'age',isClick: false},
					{title: '学历',prop: 'education',isClick: false},
					{title: '籍贯',prop: 'nativePlace',isClick: false},
					{title: '现住址',prop: 'presentAddress',isClick: false},
					{title: '期望职位',prop: 'position',isClick: false},
					{title: '工作状态',prop: 'workStatus',isClick: false},
					{title: '项目归属',prop: 'projectBelongs',isClick: false},
					{title: '入职时间',prop: 'hiredate',isClick: false},
					{title: '最新备注',prop: 'newRemarks',isClick: true,eventName: 'addRemarks'},
					{title: '历史备注',prop: 'oldRemarks',isClick: false},
					{title: '录入时间',prop: 'createTime',isClick: false},
					{title: '简历',prop: 'resume',isClick: true,eventName: 'openResume'},
				],
				noOperation:true,	//是否有操作项
				operation:[			//操作项内容
					{name:'修改明细查看',isBtn:false,title:'openDetailsDialog'},
					{name:'所有备注查看',isBtn:false,title:'openRemarksDialog'}
				],
				data:[
					/* {
						arrange: '已安排',
						name: '徐凤年',
						telnum: '156565656',
						position: '月嫂',
						workStatus: '在职',
						projectBelongs: '发财网络科技有限公司',
						newRemarks: 'xxx',
						oldRemarks: 'xxx',
						createTime: '2020-1-55',
						resume: '查看简历'
					}, */
				]
			},
			/* 弹窗数据 */
			inputData:{
				showDialog: false,										//显示弹窗
				title: '账户数据移交',									//标题
				type: '',												//弹窗类型
				dialogContent:[
					{ title: '交接账号:',value: 'account'},
					{ title: '管理员密码:',value: 'password'},
				],
				form: {
					account: '',											//交接账户
					password: '',											//密码
				},
				userInfo: {},												//被操作人员信息
				tips: '',													//提示语
			},
			/* 明细弹窗数据 */
			detailsData:{
				showDialog: false,											//显示弹窗
				title: '修改明细',											//标题
				type: '',													//明细还是备注
				list:[														//数据列表
					/* {	
						createTime: '2020年09月11日10:41:54',						//标题
						comment: '修改手机号码：15202120781 为 手机号码：120383774748',	//内容
					}, */
				],
				userInfo: {},												//当前被操作人员的信息
				totalNum: 0,												//数据量
			},
			/* 添加备注弹窗 */
			remarksData:{
				showDialog: false,											//显示弹窗
				title: '添加备注',											//标题
				userInfo: {},												//当前被操作人员信息
			},
			/* 简历模板数据 */
			remuseData:{
				showDialog: false,											//显示弹窗
				title: '简历列表',											//标题
				list: [
					{
						title: '一、简历',
					},
					{
						title: '二、简历',
					},
					{
						title: '三、简历',
					}
				]
			},
			
			/* 分页功能数据 */
			cur:1,
			pageSize: 10,
			totalNum: 0,		//总共有多少条数据,根据这个数据去适配页数
		}
	},
	created(){
		this.init();
	},
	methods:{
		restPassword(row){
			this.inputData.showDialog = true;
			this.inputData.title = '重置密码';
			this.inputData.type = '重置密码';
			 this.inputData.data = row
		},
		//初始化
		init(){
			this.goBack();
			this.getList();
		},
		
		esiteUser(row){
			console.log(row);
			this.inputData.showDialog = true;
			this.inputData.type = '编辑电话招聘';
			 this.inputData.title = '编辑电话招聘';
			  this.inputData.data = row
		},
		//获取招聘人员管理数据列表-管理员列表/业务员项目列表
		getList(form){
			// console.log(form);
			let params = {
				pageNum: this.cur,
				pageSize: this.pageSize
			};
			if(form){
				params = Object.assign(params,form);
			}
			if(this.title.add){
				//管理员列表
				this.$telAxios.post('/v1/librarian/selectFlexibileUserInfoList',params).then(res => {
					console.log(res);
					if(res.data.code === 1000){
						let result = res.data.data;
						this.tableList.data = result.flist;
						this.totalNum = Number(result.totalNum);
					}else{
						this.$message({
							message: res.data.message,
							type: 'warning'
						})
					}
				})
			}else{
				//业务员详情列表
				params.userId = this.commonMsg.userInfo.userId;
				this.$telAxios.post('/v1/librarian/selectLibrarianList',params).then(res => {
					console.log(res);
					if(res.data.code === 1000){
						let result = res.data.data;
						this.administrators.data = result.llist;
						result.llist.forEach(item => {
							item.resume = '查看简历';
							if(item.plist.length == 0){
								item.newRemarks = '-';
								item.oldRemarks = '-';
							}else if(item.plist.length == 1){
								item.newRemarks = item.plist[0].comment;
								item.oldRemarks = '-';
							}else{
								item.newRemarks = item.plist[0].comment;
								item.oldRemarks = item.plist[1].comment;
							}
						})
						this.totalNum = Number(result.totalNum);
					}else{
						this.$message({
							message: res.data.message,
							type: 'warning'
						})
					}
				})
			}
			
			
		},
		//返回
		goBack(){
			this.title.add = true;
			localStorage.setItem('pageTitle','电话招聘人员管理');
			this.$store.dispatch('setPageTitle',localStorage.getItem('pageTitle'));
		},
		//管理员条件搜索
		searchData(data){
			console.log(data);
			this.commonMsg.searchData = data;
			this.getList(data);
		},
		//查看明细
		detailsView(data){
			console.log(data);
			this.commonMsg.userInfo = data;
			this.title.add = false;
			localStorage.setItem('pageTitle','电话招聘人员管理——'+data.name);
			this.$store.dispatch('setPageTitle',localStorage.getItem('pageTitle'));
			this.$nextTick(() => {
				this.$refs.search.clearData();
				this.getList(this.commonMsg.searchData);
			});
			
		},
		//提交弹窗的数据
		subData(data){
			console.log(data);
			if(this.inputData.type == '新增'||this.inputData.type == '编辑电话招聘'||this.inputData.type == '重置密码'){
				if(this.inputData.type == '重置密码'){ 
					data.status = undefined
				}
				this.$telAxios.post('/v1/librarian/insertFlexibileUser',data).then(res => {
					console.log(res);
					if(res.data.code === 1000){
						this.$message({
							message: '操作成功！',
							type: 'success'
						})
						this.inputData.showDialog = false;
						this.getList(this.commonMsg.searchData);
					}else{
						this.$message({
							message: res.data.message,
							type: 'warning'
						})
					}
				})
				
				// this.$telAxios.post('/v1/librarian/selectUserInfoExit',data).then(res => {
				// 	console.log(res);
				// 	if(res.data.code === 1000){
				// 		if(res.data.data === false){
				// 			this.$telAxios.post('/v1/librarian/insertFlexibileUser',data).then(res => {
				// 				console.log(res);
				// 				if(res.data.code === 1000){
				// 					this.$message({
				// 						message: '操作成功！',
				// 						type: 'success'
				// 					})
				// 					this.inputData.showDialog = false;
				// 					this.getList(this.commonMsg.searchData);
				// 				}else{
				// 					this.$message({
				// 						message: res.data.message,
				// 						type: 'warning'
				// 					})
				// 				}
				// 			})
				// 		}else{
				// 			this.$message({
				// 				message: '此账号已存在，请更换一个账号名称！',
				// 				type: 'warning'
				// 			})
				// 		}
				// 	}else{
				// 		this.$message({
				// 			message: res.data.message,
				// 			type: 'warning'
				// 		})
				// 	}
				// })

			}else if(this.inputData.type == '移交'){
				let params = {
					glyPass: data.glyPass,
					newUserId: data.newUserId,
					oldUserId: this.inputData.userInfo.userId
				};
				this.$telAxios.post('/v1/librarian/updateFlexibileLibrarianByUserId',params).then(res => {
					console.log(res);
					if(res.data.code === 1000){
						this.$message({
							message: '账号移交成功！',
							type: 'success'
						})
						this.searchData(this.commonMsg.searchData);
					}else{
						this.$message({
							message: res.data.message,
							type: 'warning'
						})
					}
				})
				this.inputData.showDialog = false;
			}
			
		},
		//打开新增账户/移交账户弹窗
		openInputDialog(type,data){
			console.log(type);
			console.log(data);
			this.inputData.type = type;
			this.inputData.userInfo = data;
			this.inputData.showDialog = true;
			if(type == '新增'){
				this.inputData.title = '新增电话招聘';
				this.inputData.dialogContent = [
					{title: '姓名',value: 'name'},
					{title: '手机号',value: 'telnum'},
					{title: '账号',value: 'accountNumber'}
				]
				this.inputData.form = {
					name: '',telnum: '',accountNumber: ''
				}
				this.inputData.tips = '账号默认密码为admin@123，请工作人员登录并修改';
			}else if(type == '移交'){
				this.inputData.title = '账户数据移交';
				this.inputData.dialogContent = [
					{title: '被交接人账号',value: 'transfer'},
					{title: '管理员密码:',value: 'glyPass'}
				]
				this.inputData.form = {
					transfer: '',glyPass: ''
				}
				this.inputData.tips = '';
			}
		},
		//获取明细/备注列表
		getDetailsList(obj){
			let params = {
				librarianId: this.detailsData.userInfo.librarianId,
				pageNum: obj.cur,
				pageSize: obj.pageSize
			}
			let url = this.detailsData.type == '明细'?'/v1/librarian/selectDetailBylibrarianId':'/v1/librarian/selectPostscriptVoList';
			this.$telAxios.post(url,params).then(res => {
				console.log(res);
				if(res.data.code === 1000){
					let result = res.data.data;
					if(this.detailsData.type == '明细'){
						result.dlist.forEach(item => {
							let mold = '修改类型：';
							if(item.grade == 1){
								mold += '姓名';
							}else if(item.grade == 2){
								mold += '手机号';
							}else if(item.grade == 3){
								mold += '岗位';
							}else if(item.grade == 4){
								mold += '工作状态';
							}else if(item.grade == 5){
								mold += '项目归属';
							}else if(item.grade == 6){
								mold += '标注';
							}else if(item.grade == 7){
								mold += '备注';
							}else if(item.grade == 8){
								mold += '简历';
							}else if(item.grade == 10){
								mold += '性别';
							}else if(item.grade == 11){
								mold += '年龄';
							}else if(item.grade == 12){
								mold += '学历';
							}else if(item.grade == 13){
								mold += '籍贯';
							}else if(item.grade == 14){
								mold += '现住址';
							}else if(item.grade == 16){
								mold += '入职时间';
							}
							item.comment = mold + '<br/>' + ' 修改前内容：' + item.changedFront + '<br/>' + ' 修改后内容：' + item.changedQueen;
						})
						this.detailsData.list = result.dlist;
					}else{
						this.detailsData.list = result.plist;
					}
					this.detailsData.totalNum = Number(result.totalNum);
				}else{
					this.$message({
						message: res.data.message,
						type: 'warning'
					})
				}
			})
			
		},
		//打开明细/备注弹窗
		openDetailsDialog(type,data){
			console.log(type);
			console.log(data);
			this.detailsData.type = type;
			this.detailsData.userInfo = data;
			this.detailsData.showDialog = true;
			this.detailsData.title = type == '明细'?'修改明细':'备注';
			this.getDetailsList({cur:1,pageSize:10});
		},
		//打开添加新备注弹窗
		addRemarks(data){
			console.log(data);
			this.remarksData.showDialog = true;
			this.remarksData.userInfo = data;
		},
		//提交新增备注数据
		subRemarks(data){
			console.log(data);
			let params = {
				librarianId: this.remarksData.userInfo.librarianId,
				changedFront: this.remarksData.userInfo.newRemarks,
				changedQueen: data,
				grade: 7
			};
			this.$telAxios.post('/v1/librarian/insertDetail',params).then(res => {
				console.log(res);
				if(res.data.code === 1000){
					this.$message({
						message: '添加备注成功！',
						type: 'success'
					})
					this.$refs.remark.clearData();
					this.searchData(this.commonMsg.searchData);
				}else{
					this.$message({
						message: res.data.message,
						type: 'warning'
					})
				}
			})
			this.remarksData.showDialog = false;
		},
		//打开简历模板
		openResume(data){
			console.log(data);
			this.remuseData.showDialog = true;
			this.$telAxios.post('/v1/librarian/selectFlexibileResumeList',{librarianId:data.librarianId}).then(res => {
				console.log(res);
				if(res.data.code === 1000){
					this.remuseData.list = res.data.data;
				}else{
					this.$message({
						message: res.data.message,
						type: 'warning'
					})
				}
			})
		},
		
		
		//当前页是第几页,点击的第几页的时候调用这个函数
		pageChange(p) {
			// 点击的时候传过来一个参数，这个参数就是所点击的当前页数，
			// 然后把这个当前页数转换成字符串形式赋值给page，
			// 然后把page这个参数传给search这个方法
			console.log(p);
			this.cur = p;
			this.searchData(this.commonMsg.searchData);
		},
		//每页有多少条,10,20,50等,点击选择的时候调用这个方法
		handleSizeChange (val) {
			console.log(val);
			this.pageSize = val;
			this.searchData(this.commonMsg.searchData);
		},
	}
}
</script>

<style scoped="scoped">
.container{background-color: #fff;padding-left: 20px;}
.header-title{padding: 10px 0 20px 0;border-bottom: 1px solid #D2D2D2;}
.header-title span{width: 15px;float: left;height: 30px;background-color: #0064E4;margin-right: 20px;}
.header-title p{font-size: 16px;line-height: 30px;float: left; font-family: PingFang SC;}
.header-title .fr{float: right;margin-right: 30px;cursor: pointer;color: #5492CC;}
.pageBox{margin-top: 20px;}
/deep/.el-table th {
	    height: 46px;
	    font-size: 14px;
	    color: #727272;
	    background-color: rgb(86, 145, 202);
		border: rgb(86, 145, 202);
		 color: white;
	}
	 
</style>
